<template>
  <div class="homepage">
    <header class="header">
      <h1>欢迎来到OnStage云盘</h1>
    </header>
    <main class="main-content">
      <section class="card" v-for="item in items" :key="item.id">
        <img :src="item.image" alt="图片" class="card-image" style="width: 100%; height:150px;" />
        <div class="card-description">
          <h2>{{ item.title }}</h2>
          <p>{{ item.description }}</p>
        </div>
      </section>
    </main>
    <footer class="footer">
      <p>&copy; 2024 我的企业云盘</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const items = ref([
  {
    id: 1,
    title: '智能储备',
    description: '把电脑搬到OnStage网盘',
    image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.Mr9_9tXKB43QFjr9K4brJgHaEK?rs=1&pid=ImgDetMain',
  },
  {
    id: 2,
    title: '文件无损传输',
    description: '支持最大100GB文件发送，批量发也很方便；文件没有时间限制，永不过期～',
    image: 'https://img95.699pic.com/photo/50054/8170.jpg_wh860.jpg',
  },
  {
    id: 3,
    title: 'OnStage云盘',
    description: '让美好永远相伴',
    image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.qgPqJYOD0H83uGV5TJB8XgHaEU?rs=1&pid=ImgDetMain',
  },
]);
</script>

<style scoped>
.homepage {
  font-family: Arial, sans-serif;
  text-align: center;
  /* background-color: #f0f0f0; */
  padding: 20px;
  
}

.header {
  background: linear-gradient(135deg, #6b6bff, #ff6b6b);
  color: white;
  padding: 20px 0;
}

.main-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 20px 0;
  height: 100%;
}

.card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 10px;
  overflow: hidden;
  width: 200px;
  transition: transform 0.3s;
}

.card:hover {
  transform: scale(1.05);
}

.card-image {
  width: 100%;
  height: auto;
}

.card-description {
  padding: 15px;
}

.footer {
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}
</style>
